import React from 'react'
import { SegmentedControl, ListView, Button } from 'antd-mobile'
import './supplier.css'

const NUM_ROWS = 20
let pageIndex = 0

function getData(pIndex = 0) {
  const dataArr = []
  for (let i = 0; i < NUM_ROWS; i++) {
    dataArr.push({
      content: `row - ${(pIndex * NUM_ROWS) + i}`,
      name: 'name',
      id: 'id',
      age: 'age'
    })
  }
  return dataArr
}

class Supplier extends React.Component {

  state = {
    refreshing: true,
    isLoading: true,
    dataSource: new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    })
  }
  
  componentDidMount() {
    document.title = '供应商库'
    // 加载数据
    setTimeout(() => {
      this.rData = getData()
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        refreshing: false,
        isLoading: false,
      })
    }, 500)
  }

  // // 下拉刷新
  // onRefresh = () => {
  //   this.setState({ refreshing: true, isLoading: true })
  //   // 加载数据
  //   setTimeout(() => {
  //     this.rData = getData()
  //     this.setState({
  //       dataSource: this.state.dataSource.cloneWithRows(this.rData),
  //       refreshing: false,
  //       isLoading: false,
  //     })
  //   }, 500)
  // }

  onChange = (e) => {
    let selectedIndex = e.nativeEvent.selectedSegmentIndex
    console.log(selectedIndex)
  }

  // 上拉加载
  onEndReached = (event) => {
    if (this.state.isLoading && !this.state.hasMore) return
    console.log('reach end', event)
    this.setState({ isLoading: true })
    // 加载数据
    setTimeout(() => {
      this.rData = [...this.rData, ...getData(++pageIndex)]
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      })
    }, 300)
  }

  render() {
    // let { dataSource, isLoading, refreshing } = this.state
    let { dataSource } = this.state
    return (
      <div className="_supplier">
        <div className="tabs">
          <div className="tabs-box">
            <SegmentedControl values={ ['在库', '待审核'] } style={{ height: '100%' }} onChange={ this.onChange }></SegmentedControl>
          </div>
        </div>
        <div className="main">
          <ListView
            // 指定在组件刚挂载的时候渲染多少行数据，用这个属性来确保首屏显示合适数量的数据
            // initialListSize = { 50 }
            // 每次事件循环（每帧）渲染的行数
            pageSize={ 20 }
            // ref
            ref={  el => this.lv = el }
            // ListView.DataSource 实例
            dataSource={ dataSource }
            // 调用onEndReached（下拉刷新）之前的临界值，单位是像素
            // onEndReachedThreshold={ 1000 }
            // 样式
            style={{ height: '100%' }}
            // 下拉刷新
            // pullToRefresh = { <PullToRefresh refreshing = { refreshing } onRefresh = { this.onRefresh } /> }
            // 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用
            onEndReached={ this.onEndReached }
            // 如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。
            // 在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。
            renderSeparator={(sectionID, rowID) => (
              <div
                key={ `${ sectionID }-${ rowID }` }
                style={{
                  backgroundColor: '#f5f5f5',
                  height: '1px',
                }}
              />
            )}
            // 页头与页脚（如果提供）会在每次渲染过程中都重新渲染。
            // 如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。
            // 页脚在列表的最底部，而页头会在最顶部
            // （页头）
            renderHeader={() => (
              <div className="content">
                <div className="add">
                  <button className="add-button">
                    <img className="add-button-icon" src="./images/invite.png" alt=""></img>
                    <span className="add-button-text">邀请供应商</span>
                  </button>
                </div>
                {
                  (() => {
                    let returnNode = null
                    if (this.rData && this.rData.length === 0) {
                      returnNode = (
                        <div className="nodata">
                          <div className="nodata-box">
                            <img className="nodata-img" src="./images/nodata.png" alt=""/>
                            <p className="nodata-text">暂时没有相关数据</p>
                            {/* <Button className="nodata-btn" type="primary" size="large">创建项目</Button> */}
                          </div>
                        </div>
                      )               
                    } else {
                      returnNode = (
                        <div className="search">
                          <div className="search-box">
                            <img className="search-icon" src="./images/search-icon.png" alt=""/>
                            <input className="search-input" type="text" placeholder="输入您想寻找的供应商名字"/>
                          </div>
                        </div>
                      )
                    }
                    return returnNode
                  })()
                }
              </div>
            )}
            // （页脚）
            // renderFooter = {() => (
            //   <div style={{ padding: 30, textAlign: 'center' }}>
            //     { isLoading ? '加载中...' : '已加载完' }
            //   </div>
            // )}
            // 从数据源(data source)中接受一条数据，以及它和它所在section的ID。
            // 返回一个可渲染的组件来为这行数据进行渲染。
            // 默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
            // 如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。
            renderRow={(rowData, sectionID, index) => (
              <div className="supplier-item" key={ index }>
                <div className="supplier-item-box">
                  <div className="supplier-item-left">
                    <div className="userinfo">
                      <img className="userinfo-img" alt=""/>
                      <div className="userinfo-text">
                        <p className="userinfo-text-top">阿里巴巴有限公司</p>
                        <p className="userinfo-text-bottom">王先生 13569561056</p>
                      </div>
                    </div>
                  </div>
                  <div className="supplier-item-right">
                    <div className="status">
                      <Button className="status-pass_btn" type="primary" size="small">审核</Button>
                      {/* <div className="status-nopass">审核不通过</div> */}
                    </div>
                  </div>
                </div>
              </div>
            )}
          />
        </div>
      </div>
    )
  }

}

export default Supplier